<template>
  <div>
    <div class="content__box">
      <div class="coverImg">
        <img style="width: 100px" :src="musicList.coverImgUrl" />
      </div>
      <div>
        <div class="music__list-lineOne">
          <span class="music__list-icon"></span>
          <span>{{ musicList.name }}</span>
        </div>
        <div>
          <span class="creator__name" v-if="Object.keys(musicList).length">{{
            musicList.creator.nickname
          }}</span>
          &nbsp;&nbsp;
          <!-- 创建时间 -->
          <span class="create__time">{{ musicList.createTimeF }}创建</span>
        </div>
        <div>
          <span>播放</span>
          <span>订阅</span>
          <span>分享</span>
          <span>下载</span>
          <span>评论</span>
        </div>
        <div class="music__tag">
          <span>标签:</span>
          <span class="tag__list">
            <span class="tag__item" v-for="tag in musicList.tags">{{
              tag
            }}</span>
          </span>
        </div>
        <div class="music_descrip">
          介绍：
          <span
            style="white-space: pre-line"
            v-html="musicList.description"
          ></span>
        </div>
      </div>
    </div>
    <div class="music__list-table">
      <a-table :columns="columns" :data-source="data">
        <span slot="customName" style="color: #ff6b81">
          <a-icon type="smile-o" /> 
          <template slot-scope="text,record">
            {{record.index}}
          </template>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MusicList',
  props: {
    listId: {
      type: Number,
      default: '',
    },
  },
  created() {
    this.getMusicList()
  },
  data() {
    return {
      musicList: {},
      columns: [],
      data: [],
    }
  },
  methods: {
    // 获取当前音乐列表
    getMusicList() {
      this.columns = [
        {
          key: 'index',
          align: 'left',
          slots: { title: 'customName' },
        },
        {
          title: '歌曲标题',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '时长',
          dataIndex: 'dt',
          key: 'dt',
          customRender: (text, record, index) => {
            return this.dayjs(text).format('mm:ss')
          },
        },
        {
          title: '歌手',
          key: 'singer',
          dataIndex: 'ar',
          customRender: (text, record, index) => {
            let names = ''
            text.forEach((el, index) => {
              names += el.name + (index === text.length - 1 ? '' : ',')
            })
            return names
          },
        },
        {
          title: '专辑',
          key: 'action',
          dataIndex: 'al',
          customRender: (text, record, index) => {
            return text.name
          },
        },
      ]

      this.$get('/playlist/detail', { id: this.listId }).then(({ data }) => {
        if (data.code === 200) {
          data.playlist.createTimeF = this.dayjs(
            data.playlist.createTime,
          ).format(`YYYY-MM-DD`)
          this.musicList = data.playlist
          this.data = data.playlist.tracks
          this.data.forEach((val, index) => {
            val.index = index + 1
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content__box {
  padding: 20px 0 0 0;
  display: flex;
  .coverImg {
    margin: 0 10px 0 0;
  }
  .music__list-icon {
    display: inline-block;
    height: 27px;
    width: 63px;
    background-image: url(../assets/img/iconList.png);
    background-position: 0px 866px;
  }
  .play__icon {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-image: url(../assets/img/iconList.png);
    background-position: 0px 866px;
  }
  .music__list-lineOne {
    display: flex;
    align-content: center;
    line-height: 27px;
  }
  .music__tag {
    margin-top: 20px;
  }
  .tag__item {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 30px;
    text-align: center;
    padding: 0 10px;
    margin: 0 0 0 15px;
  }
}
</style>